<template>
  <view class="page-wrap">
    <view class="main-info" v-if="hyInfo">
      <view class="image">
        <image class="image" :src="getImagePath(hyInfo.hy_profile_url,true)" mode="" v-if="hyInfo.hy_profile_url"></image>
      </view>
      <view class="info">
        <view class="top">
          <view class="hy-name">
            {{hyInfo.hy_name||''}}
          </view>
          <!--  <view class="button">
            <button class="cu-btn sm round">切换<text class="cuIcon-right margin-left-xs"></text></button>
          </view> -->
        </view>
        <view class="bottom">
          会员编号：{{hyInfo.hy_no||''}}
        </view>
      </view>
    </view>
    <view class="detail-box">
      <view class="detail-title">
        健康投资损益图像
      </view>
      <view class="chart-box">
        <uni-echart class="uni-ec-charts" canvasId="uni-ec-charts" id="uni-ec-charts" :ec="echartsOption">
        </uni-echart>
      </view>
    </view>
    <view class="detail-box">
      <view class="detail-title">
        健康投资损益数据列表
      </view>
      <view class="table-box">
        <view class="table-head table-row">
          <view class="table-col">
            利益项
          </view>
          <view class="table-col text-blue">
            损益价值（元）
          </view>
        </view>
        <view class="table-row">
          <view class="table-col">
            慢病支出预防效益
          </view>
          <view class="table-col text-blue">
            {{total*0.5*100/100}}
          </view>
        </view>
        <view class="table-row">
          <view class="table-col">
            同业平均支出节约
          </view>
          <view class="table-col text-blue">
            {{total*0.3*100/100}}
          </view>
        </view>
        <view class="table-row">
          <view class="table-col">
            重症风险预防效益
          </view>
          <view class="table-col  text-blue">
            {{total*1*100/100}}
          </view>
        </view>
        <view class="table-row">
          <view class="table-col">
            精神劳务损失节约
          </view>
          <view class="table-col  text-blue">
            {{total*0.2*100/100}}
          </view>
        </view>
        <view class="table-row">
          <view class="table-col">
            投资总价值
          </view>
          <view class="table-col  text-blue">
            {{total*2*100/100}}
          </view>
        </view>
      </view>
    </view>
    <view class="detail-box">
      <view class="detail-title">
        健康投资损益备注信息
      </view>
      <view class="remark-box">
        <view class="remark-item">
          <view class="remark-title">
            慢病支出预防效益
          </view>
          <view class="remark-content">
            由亚健康症状转为长期难治的慢病会增加更大的支出，提前防范会节约成本
          </view>
        </view>
        <view class="remark-item">
          <view class="remark-title">
            同业平均支出节约
          </view>
          <view class="remark-content">
            对于当前的亚健康症状调理，社区中医健康管理中心的费用明显低于同业水平
          </view>
        </view>
        <view class="remark-item">
          <view class="remark-title">
            重症风险预防效益
          </view>
          <view class="remark-content">
            若由亚健康症状突变为重大疾病则手术费治疗费欸误工费等等综合成本巨大
          </view>
        </view>
        <view class="remark-item">
          <view class="remark-title">
            精神劳务损失节约
          </view>
          <view class="remark-content">
            亚健康症状的存在会影响日常的精神状态与做事效率甚至影响家人时间精力
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import uniEchart from '@/components/uni-ec-canvas/uni-echart.vue'
  import dayjs from '../../../common/dayjs.min.js'

  let option = {
    title: {
      // text: '折线图堆叠'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['慢病支出预防效益', '同业平均支出节约', '重症风险预防效益', '精神劳务损失节约']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: true,
      data: ['损益价值']
    },
    yAxis: {
      type: 'value'
    },
    color: [
      "#0088FE",
      "#F35959",
      "#00B043",
      "#FF9201"
    ],
    series: [{
        name: '慢病支出预防效益',
        type: 'bar',
        // stack: '总量',
        barMaxWidth: "25",
        barGap: "130%",
        data: []
      },
      {
        name: '同业平均支出节约',
        type: 'bar',
        // stack: '总量',
        barMaxWidth: "25",
        barGap: "130%",
        data: []
      },
      {
        name: '重症风险预防效益',
        type: 'bar',
        // stack: '总量',
        barMaxWidth: "25",
        barGap: "130%",
        data: []
      },
      {
        name: '精神劳务损失节约',
        type: 'bar',
        // stack: '总量',
        barMaxWidth: "25",
        barGap: "130%",
        data: []
      }
    ]
  }

  export default {
    components: {
      uniEchart
    },
    data() {
      return {
        echartsOption: {
          option
        },
        hy_no: "",
        hyInfo: {},
        total: 0
      }
    },
    methods: {
      getInfo() {
        let req = {
          "serviceName": "srvstore_member_mgmt_select",
          "colNames": ["*"],
          "condition": [{
            colName: 'hy_no',
            ruleType: 'eq',
            value: this.hy_no
          }],
          "page": {
            "pageNo": 1,
            "rownumber": 99999
          },
        }
        let url = this.getServiceUrl('fyzhmd', 'srvstore_member_mgmt_select', 'select');
        this.$http.post(url, req).then(res => {
          if (res.data.state === 'SUCCESS' && res.data.data.length > 0) {
            this.hyInfo = res.data.data.find(item => item.hy_no === this.hy_no)
          }
        })
      },
      getData() {
        // money_topay
        let req = {
          "serviceName": "srvfyzh_health_programme_select",
          "colNames": ["*"],
          "condition": [{
            colName: 'hy_no',
            ruleType: 'eq',
            value: this.hy_no
          }],
          // order: [{
          //   colName: "create_time",
          //   orderType: "desc"
          // }],
          group: [{
            colName: 'money_topay',
            type: 'sum'
          }],
          "page": {
            "pageNo": 1,
            "rownumber": 1
          },
        }
        let url = this.getServiceUrl('fyzhmd', 'srvfyzh_health_programme_select', 'select');
        this.$http.post(url, req).then(res => {
          if (res.data.state === 'SUCCESS' && Array.isArray(res.data.data)) {
            if (res.data.data.length > 0) {
              let data = res.data.data[0].money_topay

              if (data && !isNaN(data) && typeof data === 'number') {
                this.total = data
                let series = {
                  慢病支出预防效益: [],
                  同业平均支出节约: [],
                  重症风险预防效益: [],
                  精神劳务损失节约: [],
                }

                series['慢病支出预防效益'].push(data * 0.5)
                series['同业平均支出节约'].push(data * 0.3)
                series['重症风险预防效益'].push(data)
                series['精神劳务损失节约'].push(data * 0.1)
                let options = option
                options.series[0].data = series['慢病支出预防效益']
                options.series[1].data = series['同业平均支出节约']
                options.series[2].data = series['重症风险预防效益']
                options.series[3].data = series['精神劳务损失节约']
                // options.xAxis.data = cate
                this.echartsOption.option = options
              }
            }
          }
        })
      },
    },
    onLoad(option) {
      if (option.hy_no) {
        this.hy_no = option.hy_no
        this.getInfo()
        this.getData()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .page-wrap {
    background-color: #F8F8FA;
    min-height: calc(100vh - var(--window-top));
    overflow: scroll;
  }

  .main-info {
    width: 100%;
    background-color: #fff;
    padding: 20rpx;
    display: flex;

    .image {
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
      line-height: 120rpx;
      text-align: center;
      border: 1rpx solid #f5f5f5;
      margin-right: 30rpx;
    }

    .info {
      flex: 1;

      .top {
        padding: 10rpx;
        display: flex;
        justify-content: space-between;

        .button {
          .cu-btn {
            color: #ADAEBB;
            background-color: #fff;
            border: 1rpx solid #f6f6f6;
          }
        }
      }

      .bottom {
        color: #ADAEBB;
      }
    }
  }

  .detail-box {
    background-color: #fff;
    padding: 20rpx;
    margin: 20rpx;
    border-radius: 20rpx;

    .detail-title {
      background: #F5F8FF;
      border-radius: 22px;
      font-size: 16px;
      font-family: 苹方-简;
      font-weight: normal;
      color: #0088FE;
      border-radius: 40rpx;
      text-align: center;
      padding: 20rpx;
      margin-bottom: 20rpx;
    }

    .chart-box {
      height: 500rpx;
    }

    .table-box {
      margin-top: 20rpx;
      border: 1rpx solid #F2F1F6;
      border-radius: 20rpx 20rpx 0 0;
      font-size: 14px;
      font-family: 苹方-简;
      font-weight: normal;
      color: #333333;

      .table-row {
        padding: 20rpx;
        border-bottom: 1rpx solid #F2F1F6;
        display: flex;
        justify-content: space-between;

        &.table-head {
          background-color: #F8F8FA;
        }

        &:last-child {
          border-bottom: none;
        }
      }
    }

    .remark-box {
      .remark-item {
        .remark-title {
          font-size: 14px;
          font-family: 苹方-简;
          font-weight: 600;
          color: #333333;
        }

        .remark-content {
          background: #F8F8FA;
          border-radius: 8px;
          font-size: 12px;
          font-family: 苹方-简;
          font-weight: normal;
          color: #ADAEBB;
          position: relative;
          padding: 20rpx;
          margin: 30rpx 0;
          border-radius: 20rpx;

          &::before {
            position: absolute;
            content: '';
            border: 30rpx solid transparent;
            border-bottom-color: #F8F8FA;
            top: -25px;
            left: 5%;
          }
        }
      }
    }
  }
</style>
